<template>
    <el-menu active-text-color="rgb(64, 158, 255)" background-color="#304156" class="el-menu-vertical-demo"
        text-color="#fff" :collapse="menuStore.Collapse" router unique-opened :default-active="defUrl">
        <el-menu-item index="/index">
            <template #title>
                <i class="iconfont homepage"></i>
                <span>首页</span>
            </template>
        </el-menu-item>
        <el-sub-menu :index="`/${item.name}`" v-for="item, index in menus" :key="item.id">
            <template #title>
                <i class="iconfont" :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>
            <template v-for="itemto in item.children" :key="itemto.id">
                <el-menu-item :index="`/${item.name}/${itemto.name}`" v-if="itemto.hidden === 0">
                    <template #title>
                        <i class="iconfont" :class="itemto.icon"></i>
                        <span>{{ itemto.title }}</span>
                    </template>
                </el-menu-item>
            </template>


        </el-sub-menu>



    </el-menu>
</template>
  
<script setup lang="ts">
import { useMenu } from '@/store/menu'
import { ElMenu, ElMenuItem, ElIcon, ElSubMenu } from "element-plus";
import { computed, ref, watchEffect } from "vue";
import { useUser } from '@/store/user'
import { useRoute } from 'vue-router';
const userStore = useUser()
const menuStore = useMenu();
const menus = userStore.routes

// 让菜单默认展开
const defUrl = ref('/index');
const route = useRoute()
watchEffect(() => {
    defUrl.value = route.path
})





</script>
  
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
    min-height: 100vh;
}
</style>